<!--商品展示卡片，集成了商品图片、名称、价格和加入购物车功能。-->>
<template>
  <div class="product-card">
    <div class="product-image">
      <img :src="product.image" :alt="product.name" @click="goToDetail" />
    </div>
    <!--商品图片区域
<div class="product-image">：图片容器，底部留 12px 间距
<img :src="product.image" :alt="product.name" @click="goToDetail">：
动态绑定图片源和替代文本
点击图片触发goToDetail方法跳转到详情页
商品信息区域-->>
    <div class="product-info">
      <h3 class="product-name" @click="goToDetail">{{ product.name }}</h3>
      <p class="product-price">¥{{ product.price.toLocaleString() }}</p>
      <button 
        class="add-to-cart-btn" 
        @click="addToCart"
        :disabled="product.stock === 0"
      >
        {{ product.stock === 0 ? '缺货' : '加入购物车' }}
      </button>
    </div>
  </div>
</template>
<!--import { useRouter } from 'vue-router'：用于路由导航
import { useCartStore, useUserStore } from '../stores'：引入购物车和用户状态管理-->>
<script setup>
import { useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'
import { useUserStore } from '../stores/user'

const props = defineProps({    /*接收父组件传递的product对象*/
  product: {
    type: Object,
    required: true
  }
})

const router = useRouter()
const cartStore = useCartStore()
const userStore = useUserStore()

const goToDetail = () => {       /*通过router.push跳转到商品详情页，*/
  console.log('Going to product detail with id:', props.product.id)
  router.push(`/product/${props.product.id}`)
}
/*加入购物车逻辑
登录状态检查：
未登录时弹出确认框，引导用户前往登录页面
已登录时调用cartStore.addToCart方法添加商品
用户反馈：添加成功后弹出提示框，显示 "已加入购物车"*/
const addToCart = () => {
  if (!userStore.isLoggedIn) {
    if (confirm('请先登录后再加入购物车\n\n是否前往登录页面？')) {
      router.push('/user')
    }
    return
  }
  
  cartStore.addToCart(props.product)
  // 简单的反馈提示
  alert(`${props.product.name} 已加入购物车！`)
}
</script>

<style scoped>
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-image {
  margin-bottom: 12px;
}

.product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

.product-info {
  text-align: center;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  cursor: pointer;
  color: #333;
}

.product-name:hover {
  color: #007acc;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
  margin: 0 0 12px 0;
}

.add-to-cart-btn {
  width: 100%;
  padding: 10px;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.add-to-cart-btn:hover:not(:disabled) {
  background-color: #005c99;
}

.add-to-cart-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style> 